<template>
    <el-select :value="value ? value.name : ''" @change=selectChange() :placeholder="placeholder" filterable remote reserve-keyword clearable>
      <!-- <el-option v-for="house in houses" :key="house.id" :value="house">{{house.name}}</el-option> -->
      <el-option :label="house.name" v-for="house in houses" :key="house.id" :value ="house">{{house.name}}</el-option>
    </el-select>
</template>
<script>
export default {
  name: 'House',
  data () {
    return {
      houses: []
    }
  },
  props: {
    value: [Object],
    placeholder: String
  },
  mounted () {
    this.getHouses()
  },
  created () {
    this.getHouses()
  },
  methods: {
    getHouses () {
      let that = this
      this.$http.get(`/basic/house/all`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        that.houses = res.data
        /*
        res.data.forEach(function (house) {
          that.houses[house.id] = house
        })
        */
        // this.house_change()
        this.$forceUpdate()
      }).catch(() => {})
    },
    selectChange () {
      this.$emit('houseChange', this.value)
    }
  }
}
</script>
